{% extends 'setting/base.html' %}

{% block selfstyle %}

<style type="text/css">


p{
    margin-top:10px;
    margin-bottom:10px;
}

p,span{
  color: #2B2B2B;
}
</style>



{% endblock %}

{% block content %}

                    {% if G.success %}
                      <p class="tip" >修改成功</p>
                    {% endif %}
                  <div class="wrap_avatar" >
                     <div class="avatar_show" >
                        <img id="target" src="{{ avatar_url_temp }}{{ user.last_avatar }}">
                        <p style="width:324px" >
                            上传你喜欢的照片，随意拖拽或调整大图中的虚线方格，预览的小图（160x160像素）即为保存后的头像图标。
                        </p>
                    </div>
                    
                    <div class="avatar_form" >
                        <p style="width:auto" >点此按钮选择选择图片上传，支持jpg，jpeg，png，gif或bmp</p>
                        <div class="loading"  >
                            <img src="{{ STATIC_URL }}image/ajax-loader.gif">
                        </div>
                        <div class="uploader" style="">
                            <label id="upload_button" >点此上传</label>
                            <input type="file" size="2"  id="avatarImage" multiple="multiple" name="avatarImage">
                        </div>

                        <div style="float:left" >
                          <form action='/setting/avatar/crop/' method='post' >
                              <p style="width:160px;height:160px;overflow:hidden;" >
                                  <img src="{{ avatar_url }}{{ user.avatar }}" class="jcrop-preview" id="preview">
                              </p>
                              <span style="display:block;clear:both;padding:4px 0px" >头像160*160</span>
                              <p>
                                  <input type="submit"  class="action" value="确认修改" />
                              </p>
                              <input id="x1" name="x1" type="hidden" value="0" />
                              <input id="x2" name="x2" type="hidden" value="340" />
                              <input id="y1" name="y1" type="hidden" value="0" />
                              <input id="y2" name="y2" type="hidden" value="340" />
                              <input id="filename" name="filename" type="hidden" value="{{ user.head }}" />
                          </form>
                        </div>
                    </div>
                  </div>

{% endblock %}

{% block selfscript %}

  <script src="{{ STATIC_URL }}js/ajaxupload.js" ></script>
  <script src="{{ STATIC_URL }}js/jquery.Jcrop.min.js" ></script>

 <script type="text/javascript">

        var jcrop_api,boundx, boundy;

        $('#target').Jcrop({
          onChange: updatePreview,
          onSelect: updatePreview,
          bgFade:     true,
          bgOpacity: .3,
          setSelect: [0,0,340,340]
        },function(){
           // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;
        });

          function updatePreview(c)
          {

              $('#x1').val(c.x);
              $('#y1').val(c.y);
              $('#x2').val(c.x2);
              $('#y2').val(c.y2);
              console.log(c.x);
              console.log(c.y);
              console.log(c.x2);
              console.log(c.y2);
            if (parseInt(c.w) > 0)
            {
              var rx = 160 / c.w;
              var ry = 160 / c.h;

              $('#preview').css({
                width: Math.round(rx * boundx) + 'px',
                height: Math.round(ry * boundy) + 'px',
                marginLeft: '-' + Math.round(rx * c.x) + 'px',
                marginTop: '-' + Math.round(ry * c.y) + 'px'
              });
            }
          }


         var button = $('#avatarImage'), interval;
            var fileType = "pic",fileNum = "one"; 
            new AjaxUpload(button,{
                action: '/setting/avatar/',
                name: 'avatarImage',
                onSubmit : function(file, ext){
                    if(fileType == "pic")
                    {
                        if (ext && /^(jpg|png|jpeg|gif|bmp)$/.test(ext.toLowerCase())){
                            this.setData({
                                'info': '文件类型为图片'
                            });
                        } else {
                            alert("不支持的格式");
                            return false;               
                        }
                    }
                                
                    if(fileNum == 'one')
                        this.disable();   
                    $(".loading").show();
                    $("#upload_button").html("正在上传");
                },
                onComplete: function(file, response){
                    $(".loading").hide();
                    $("#upload_button").html("点此上传"); 
                    this.enable()
                    if(response==''){
                      return;
                    }

                    var json = eval("("+response+")");

                    if(json.status){
                        $("#filename").val(json.imgurl);
                        $("#target").attr("src","/img/avatar/temp/"+json.imgurl);
                        $("#preview").attr("src","/img/avatar/temp/"+json.imgurl);
                        $(".avatar_show img").attr("src","/img/avatar/temp/"+json.imgurl);
                    }else{
                        this.enable();
                    }               
                }
            }); 
 </script>

{% endblock %}